Name attribute injection

By design, name attribute is required on the target <input> element in order to kick off the validation. However sometimes the the component that renders the element is remote and does not have the API specifying the name attribute. This helper allows to bind the name on the inner element.

Positional arguments

name {string}

The name string that will embed to the <input>

selector {string} (optional)

The DOM selector string to the <input> that can help the modifier to better locate it.

Without specifying the selector

The modifier will insert name attribute to the first <input> or <select> element encountered

<div data-test-element {{install-name-attr "email"}}>
  <input
    placeholder="username@email.com"
    autocomplete="off"
    type="email"
    data-test-email
    value={{this.email}}
    required
  />
</div>

Specifying the selector

<div data-test-element {{install-name-attr "email" ".foo"}}>
  <div class="foo">
    <input
      placeholder="username@email.com"
      autocomplete="off"
      type="email"
      data-test-email
      value={{this.email}}
      required
    />
  </div>
</div>